/* 1 打开页面显示学员信息数据
        1 定义一个函数 发送请求 渲染页面

    2 新增学员
         1 点击  “新增” 按钮 弹出模态框 - 显示新增 表单   已经实现 
         2 新增表单中  籍贯 下拉列表  
           1 重新去熟悉  select 标签
           2 考虑结合业务 实现 
           3 需要给 省 下拉列表 绑定 change 事件 
                1 事件触发  获取选中的 “省” 拼接成参数 发送给后端 来获取对应 市 
                后端响应对应  市 数据了，显示在 新增表单中  市 下拉列表中 
           4 需要给 市 下拉列表 绑定 change事件 
                1 事件触发了 获取选中的 市 拼接成参数 发送给后端 来获取对应的 县 
                后端响应对应 县 数据了， 显示在 新增表单中  县  下拉列表 
    
    3 给新增表单  绑定 提交事件
        1 阻止默认行为
        2 快速获取新增表单中的值
        3 拼接成参数发送给后端 完成新增
        4 成功 
            1 提示用户 新增成功
            2 重置新增表单
            3 关闭模态框
            4 发送请求获取最新的数据 
    4 删除学员
        1 给删除按钮绑定点击事件
        2 事件触发 
        3 确认框询问用户
        4 获取要删除数据的id
        5 拼接参数 发送给后端完成删除
        6 提示用户 
        7 获取最新数据 
    5 编辑学员
        1 给 编辑 按钮绑定点击事件  
          1 弹出编辑-模态框 
          2 获取被编辑数据的id 发送给后端 后端响应数据 
          3 获取到数据 显示在 编辑表单中 
        2 先设置一下 下拉列表 也能正常使用  先实现！！
          3 获取到数据 广东省广州市越秀区 显示在 编辑表单中 
        3 省份城市区
          1 省份不管管 打开页面的时候 初始化的获取过里面的数据 
          2 市 发送一个请求-广东省发过去，返回 市信息 显示在 select标签 
*/

const tbody = document.querySelector('tbody');
const addForm = document.querySelector('#addModal form');// 新增表单

// 发送请求 获取数据渲染页面
function getStudentList() {
    axios.get('/student/list').then((result) => {
        // console.log(result);
        if (result.data.code === 0) {
            const list = result.data.data;
            // console.log(list);
            let html = list.reduce(
                (h, v) =>
                    h + `
                <tr>
                <th scope="row">${v.id}</th>
                <td>${v.name}</td>
                <td>${v.age}</td>
                <td>${v.sex}</td>
                <td>${v.group}</td>
                <td>${v.phone}</td>
                <td>${v.salary}</td>
                <td>${v.truesalary}</td>
                <td>${v.province + v.city + v.county}</td>
                <td>
                  <button data-id="${v.id
                    }" type="button" class="btn btn-primary btn-sm update-show-modal">修改</button>
                    <button data-id="${v.id
                    }" type="button" class="btn btn-danger btn-sm delete-btn">删除</button>
                </td>
              </tr>
                `, ''
            )
            tbody.innerHTML = html;
        }
    })
}

// 发送请求获取数据 显示到对应的 下拉列表中
// url 接口地址
// params 接口的参数
// dom 目标下列表
// label 下拉列表默认显示的文本
function renderSelect(url, params, dom, label, value = '') {
    axios.get(url, { params }).then((result) => {
        // console.log("数据回来了");
        dom.innerHTML = result.data.reduce(
            (h, v) => h + `<option value="${v}">${v}</option>`,
            `<option value="">--${label}--</option>`
        );
        // 设置 select标签 选中某个值
        dom.value = value;
    });
}

// 初始化 新增表单 中 下拉列表
// 封装 函数
function initSelect(selector) {
    // 发送请求获取城市数据 来渲染下拉列表   会导致 错题提示 出现  处理
    // 原因可能是  普通数据 返回的格式   和  城市列表返回数据格式 不一样
    // 让后端去调整  返回的数据结构 必须一致！！！！

    // selector 是 形参
    const provinceSelect = document.querySelector(`${selector} [name=province]`); // 新增表单中  省 下拉列表
    const citySelect = document.querySelector(`${selector} [name=city]`); // 新增表单中  市 下拉列表
    const countySelect = document.querySelector(`${selector} [name=county]`); // 新增表单中  县 下拉列表

    // 获取省份数据 显示出来
    renderSelect('/geo/province', {}, provinceSelect, '省');

    // 新增中  省  change事件
    provinceSelect.addEventListener('change', function () {
        // 根据省来获取市
        renderSelect(
            '/geo/city',
            { pname: provinceSelect.value },
            citySelect,
            '市'
        );
    });

    citySelect.addEventListener('change', function () {
        renderSelect(
            '/geo/county',
            { pname: provinceSelect.value, cname: citySelect.value },
            countySelect,
            '县'
        );
    });
};

// 发送请求 获取数据渲染页面
getStudentList();

// 初始化新增表单的 下拉列表
// initSelect();
// 初始化 新增表单的 下拉列表
initSelect('#addModal');

// 初始化 编辑表单的 下拉列表
initSelect('#updateModal');

/* 
3 给新增表单  绑定 提交事件
*/
addForm.addEventListener('submit', function (e) {
    e.preventDefault();
    // console.log("点击到啦");
    // 获取表单数据
    const data = $(addForm).serialize()
    // console.log(data);
    axios.post('/student/add', data).then((result) => {
        console.log(result);
        if (result.data.code === 0) {
            toastr.success(result.data.message)
        };
        addForm.reset();// 重置新增表单
        $('#addModal').modal('hide')// 关闭模态框
        getStudentList(); // 获取最新数据
    });
});

/* 4 删除学员 

5 编辑学员
        1 给 编辑 按钮绑定点击事件  
          1 弹出编辑-模态框 
            2 获取被编辑数据的id 发送给后端 后端响应数据 
            3 获取到数据 显示在 编辑表单中 
        2 先设置一下 下拉列表 也能正常使用  先实现！！  
*/

// 点击删除  是用自定义属性 获取id 
tbody.addEventListener('click', function (e) {
    const dom = e.target;
    // console.log(dom);
    if (dom.classList.contains('delete-btn')) {
        if (confirm("你确定要删除吗？")) {
            const id = dom.dataset.id// 获取id
            // console.log(id);
            // 根据id 来发送请求 获取对应数据   获取待编辑的数据 显示到 对应的元素上 （普通的input标签、单选框、下拉列表标签 ）
            // { params: { id } } 是请求 参数
            axios.delete('/student/delete', { params: { id } }).then((result) => {
                // console.log(result);
                if (result.data.code === 0) {
                    toastr.success(result.data.message)// 提示框
                    getStudentList()//  获取最新数据  
                };
            });
        }
    } else if (dom.classList.contains('update-show-modal')) {// 判断是否是 编辑
        // 弹出 编辑 模态框
        $('#updateModal').modal('show');
        const id = dom.dataset.id;
        // console.log(id);
        // 根据 id 来发送请求 获取数据
        axios.get('/student/one', { params: { id } }).then((result) => {
            // console.log(result);
            const obj = result.data.data;
            // console.log(obj);
            // 对象获取 数据 用 forin
            // 大功能 把对象数据 显示在 form标签中  start
            for (const key in obj) {
                // 根据key 找到对应的dom元素
                const target = document.querySelector(`#updateModal [name=${key}]`);
                // 性别  单选框  特殊！！
                if (key === 'sex') {
                    // 根据 当前 性别的值 (obj.sex ) 找到 对应的 性别 单选框  让它选中
                    // 既要找到 name = sex 而且 value = obj.sex 标签
                    document.querySelector(
                        `#updateModal [name=sex][value=${obj.sex}]`
                    ).checked = true;

                    // 判断一下当前obj.key 是男 还是 女
                    // if (obj.sex === "男") {
                    //   document.querySelector( `#updateModal [name=sex][value=男]` ).checked = true;
                    // } else if(obj.sex==="女") {
                    //   document.querySelector( `#updateModal [name=sex][value=女]` ).checked = true;
                    // }
                    continue; // 跳过下面的代码
                }

                // 当找到了这个dom元素 我们才可以设置  给普通的表单元素使用
                if (target) {
                    target.value = obj[key];
                };

                // 根据省信息 来获取市 显示处理  异步！！！！
                renderSelect(
                    '/geo/city',
                    { pname: obj.province },
                    document.querySelector('#updateModal [name=city]'),
                    '市',
                    obj.city
                );

                // 根据省和市 来 获取 县  默认选中
                renderSelect(
                    '/geo/county',
                    { pname: obj.province, cname: obj.city },
                    document.querySelector('#updateModal [name=county]'),
                    '市',
                    obj.county
                );
            };
        });
    };
});


